<template>
  <ArmyPanelLayout class="barracksLeftTwo" title="对讲列表">
    <div class="warehouseLeftTwoNew">
      <div class="warehouseLeftTwoNew--list" v-if="tableData.length">
        <ElScrollbar wrap-style="" view-style="height: 670px;" :always="false">
          <div class="warehouseLeftTwoNew--list__item" v-for="(item, index) in tableData" :key="item.time + index">
            <div class="patterns"></div>
            <div class="info">
              <div class="info--img">
                <img src="@/assets/images/armyScreen/alarm.png" />
              </div>
              <div class="info--msg">
                <!--<div class="info&#45;&#45;msg__title">设备离线告警</div>-->
                <div class="info--msg__title">{{item.actionName}}</div>
                <div class="info--msg__list">
                  <div class="item">
                    <div class="item--label">设备名称</div>
                    <div class="item--value">{{item.personName}}</div>
                  </div>
                  <div class="item">
                    <div class="item--label">上报时间</div>
                    <div class="item--value">{{item.time}}</div>
                  </div>
                  <div class="item">
                    <div class="item--label">详细位置</div>
                    <div class="item--value"> {{item.addr}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </ElScrollbar>
      </div>
      <div v-else class="empty" style="padding-top: 25%;">
        <DataEmptyTwo></DataEmptyTwo>
      </div>
    </div>
  </ArmyPanelLayout>
</template>

<script setup>
import ArmyPanelLayout from '@/views/armyScreen/comp/ArmyPanelLayout.vue'
import {ElScrollbar} from 'element-plus'
import {alarmList} from '@/api/armyScreenApi.js'
import DataEmptyTwo from "@/components/common/DataEmptyTwo.vue";
import $bus from "@/util/bus";

onMounted(() => {
  alarmListService()
  $bus.on('reRequest', alarmListService)
})
onBeforeUnmount(() => {
  $bus.off('reRequest', alarmListService)
})


const tableData = ref([])
function alarmListService () {
  const paramObj = {
    "actionType": 1,
    "pageNo": 1,
    "pageSize": 20
  }
  alarmList(paramObj).then(res => {
    const tempArr = res?.data?.list || [
      // {
      //   actionName: '紧急报警',  // 动作：布防/撤防
      //   addr: '测试点3',  // 地点
      //   personName: '32345',  // 操作人员姓名
      //   time: '2023-10-15T 15:53:47.000+08:00',  // 触发时间
      // }
    ]
    tempArr.forEach(item => {
      item.newTime = item.time.substring(0, 10) + ' ' + item.time.substring(12, 20)
    })

    // tableData.value = tempArr.concat(tempArr, tempArr, tempArr)
    tableData.value = tempArr
  })
}

</script>

<style lang="scss" scoped>
.warehouseLeftTwoNew {
  min-height: 670px;
  padding-bottom: 10px;
  &--list {
    padding-top: 8px;
    &__item {
      width: 420px;
      height: 124px;
      background-image: linear-gradient(180deg, rgba(15, 74, 159, 0.00) 0%, rgba(17, 75, 160, 0.095) 59%, rgba(27, 107, 210, 0.1) 100%);
      position: relative;
      margin: 0 auto;
      margin-bottom: 8px;
      .patterns {
        height: 100%;
        width: 100%;
        background-size: 10px 10px;
        background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 5%, transparent 5%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 55%, transparent)
      }
      .info{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        padding: 8px 12px;
        &--img{
          width: 85px;
          min-width: 85px;
          height: 108px;
          margin-right: 16px;
          img{
            width: 100%;
            height: auto;
          }
        }
        &--msg{
          flex-grow: 1;
          padding-top: 4px;
          &__title{
            font-family: PangMenZhengDao;
            font-size: 16px;
            color: #DBFAFF;
            letter-spacing: 0;
            text-shadow: 0 1px 2px rgba(0,133,176,0.50);
            font-weight: 400;
            margin-bottom: 8px;
          }
          &__list{
            .item{
              display: flex;
              line-height: 22px;
              &--label{
                width: 64px;
                font-size: 12px;
                color: rgba(255, 255, 255, 0.6);
                letter-spacing: 0;
                font-weight: 400;
              }
              &--value{
                flex: 1;
                font-family: PingFangSC-Regular;
                font-size: 12px;
                color: #D8F0FF;
                letter-spacing: 0;
                font-weight: 400;
              }
            }
          }
        }
      }
    }
  }
}
</style>
